{{ define "main" }}

{{ .Scratch.Set "scope" "list" }}
{{ if .Site.Params.list.showHero | default false }}
{{ $heroStyle := print "partials/hero/" .Site.Params.list.heroStyle ".html" }}
{{ if templates.Exists $heroStyle }}
{{ partial $heroStyle . }}
{{ else }}
{{ partial "partials/hero/basic.html" . }}
{{ end }}
{{- end -}}

{{ $toc := and (.Params.showTableOfContents | default (.Site.Params.list.showTableOfContents | default false)) (in
.TableOfContents "<ul") }} <header>
  {{ if .Params.showBreadcrumbs | default (.Site.Params.list.showBreadcrumbs | default false) }}
  {{ partial "breadcrumbs.html" . }}
  {{ end }}
  <h1 class="mt-5 text-4xl font-extrabold text-neutral-900 dark:text-neutral">{{ .Title }}</h1>
  <div class="mt-1 mb-2 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
    {{ partial "article-meta/list.html" (dict "context" . "scope" "single") }}
  </div>
  <script>
    var oid = "views_{{ .File.Path }}"
    var oid_likes = "likes_{{ .File.Path }}"
  </script>
  {{ $jsPage := resources.Get "js/page.js" }}
  {{ $jsPage = $jsPage | resources.Minify | resources.Fingerprint "sha512" }}
  <script type="text/javascript" src="{{ $jsPage.RelPermalink }}" integrity="{{ $jsPage.Data.Integrity }}"></script>
  </header>
  <section class="{{ if $toc -}}
      mt-12
    {{- else -}}
      mt-0
    {{- end }} prose flex max-w-full flex-col dark:prose-invert lg:flex-row">
    {{ if $toc }}
    <div class="order-first px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8">
      <div class="toc ltr:pl-5 rtl:pr-5 lg:sticky {{ if hasPrefix .Site.Params.header.layout "fixed" -}}
      lg:top-[140px]{{ else }}lg:top-10{{ end }}">
        {{ partial "toc.html" . }}
      </div>
    </div>
    {{ end }}
    <div class="min-w-0 min-h-0 max-w-prose">
      {{ .Content | emojify }}
    </div>
   



  </section>
  {{ if gt .Pages 0 }}

    {{ $cardView := .Params.cardView | default (.Site.Params.list.cardView | default false) }}
    {{ $cardViewScreenWidth := .Params.cardViewScreenWidth | default (.Site.Params.list.cardViewScreenWidth | default false) }}
    {{ $groupByYear := .Params.groupByYear | default ($.Site.Params.list.groupByYear | default false) }}

    {{ if not $cardView }}

    <section class="space-y-10 w-full">
      {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
      {{ if $groupByYear }}
      <h2 class="mt-12 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
        {{ .Key }}
      </h2>
      {{ end }}
      {{ range .Pages }}
      {{ partial "article-link/simple.html" . }}
      {{ end }}
      {{ end }}
    </section>

    {{ else if and $cardView (not $cardViewScreenWidth) }}

      {{ if $groupByYear }}

      {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
        <h2 class="mt-12 mb-3 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
          {{ .Key }}
        </h2>
        <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
          {{ range .Pages }}
          {{ partial "article-link/card.html" . }}
          {{ end }}
        </section>
      {{ end }}

    {{ else }}

        <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
          {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
          {{ range .Pages }}
          {{ partial "article-link/card.html" . }}
          {{ end }}
          {{ end }}
        </section>

    {{ end }}

    {{ else if and $cardView $cardViewScreenWidth }}

      {{ if $groupByYear }}

        {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
        <div class="relative w-screen max-w-[1600px] px-[30px]" style="left: calc(max(-50vw,-800px) + 50%);">
          <h2 class="mt-12 mb-3 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
            {{ .Key }}
          </h2>
          <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
            {{ range .Pages }}
            {{ partial "article-link/card.html" . }}
            {{ end }}
          </section>
        </div>
        {{ end }}

      {{ else }}

        <div class="relative w-screen max-w-[1600px] px-[30px]" style="left: calc(max(-50vw,-800px) + 50%);">
          <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
            {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
            {{ range .Pages }}
            {{ partial "article-link/card.html" . }}
            {{ end }}
            {{ end }}
          </section>
        </div>

      {{ end }}

    {{end}}

  {{ else }}
  <section class="mt-10 prose dark:prose-invert">
    <p class="py-8 border-t">
      <em>{{ i18n "list.no_articles" | emojify }}</em>
    </p>
  </section>
  {{ end }}

    {{ partial "pagination.html" . }}

  {{ end }}